<template>
  <page-layout>
    <div slot="extra" class="workPlace" :class="headerList.length >= 4 ? 'between' : 'around' ">
      <a-list :data-source="headerList">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-list-item-meta :description="item.value">
            <a slot="title" style="font-size:20px;font-weight:bold;">{{ item.num }}</a>
            <a-avatar slot="avatar" shape="square" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></a-avatar>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </div>
    <template>
      <a-row style="margin: 0 -12px">
        <a-col style="padding: 0 12px" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :title="'待办清单（'+dataSource.length+'）'" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
            <a slot="extra" class="ant-dropdown-link" @click="onViewAll">查看全部</a>
            <a-table class="table" style="padding:20px 24px;" :columns="columns" :data-source="dataSource" rowKey="id" :pagination="{
            current: page,
            pageSize: pageSize,
            total: total,
            showLessItems: true,
            onChange: onPageChange,
            onShowSizeChange: onSizeChange,
          }">
              <template v-for="col in ['type','project','status', 'beforeNode', 'intoTime']" :slot="col" slot-scope="text, record">
                <div :key="col">
                  <span v-if="col == 'status' ">
                    <a-badge v-if="record.status == 0" color="green" text="待处理" />
                    <a-badge v-else color="red" text="已完成" />
                  </span>
                  <span v-else>{{text}}</span>
                </div>
              </template>
              <template slot="operation" slot-scope="text, record">
                <a class="ant-dropdown-link" @click="onDeal(record)">处理</a>
              </template>
            </a-table>
          </a-card>
        </a-col>
        <a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
          <!-- <a-card :title="$t('access')" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
            <div class="item-group">
              <a v-for="(item, index) in $router.options.routes[3].children[4].children" :key="index" @click="goPage(item.fullPath)">
                <font v-if="!item.meta.invisible">{{item.name}}</font>
              </a>
            </div>
          </a-card> -->
        </a-col>
      </a-row>
    </template>
  </page-layout>
</template>

<script>
import PageLayout from '@/layouts/PageLayout'
import { mapState } from 'vuex'
import { request, METHOD } from '@/utils/request'

export default {
  name: 'WorkPlace',
  components: { PageLayout },
  i18n: require('./i18n'),
  data () {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      columns: [
        {
          title: "类型",
          dataIndex: "type",
          width: '15%',
          scopedSlots: { customRender: "type" }
        },
        {
          title: "项目",
          dataIndex: "project",
          width: '15%',
          scopedSlots: { customRender: "project" }
        },
        {
          title: "状态",
          dataIndex: "status",
          width: '15%',
          scopedSlots: { customRender: "status" }
        },
        {
          title: "上个节点",
          dataIndex: "beforeNode",
          width: '15%',
          scopedSlots: { customRender: "beforeNode" }
        },
        {
          title: "转入时间",
          dataIndex: "intoTime",
          width: '20%',
          scopedSlots: { customRender: "intoTime" }
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" }
        }
      ],
      dataSource: [
        {
          id: 0,
          type: "张小刚0",
          project: "销售部",
          status: 0,
          beforeNode: "郭帅",
          intoTime: "2021-09-08 12:00:00"
        },
        {
          id: 1,
          type: "张小刚1",
          project: "销售部",
          status: 0,
          beforeNode: "郭帅",
          intoTime: "2021-09-08 12:00:00"
        },
        {
          id: 2,
          type: "张小刚0",
          project: "销售部",
          status: 0,
          beforeNode: "郭帅",
          intoTime: "2021-09-08 12:00:00"
        },
        {
          id: 3,
          type: "张小刚0",
          project: "销售部",
          status: 0,
          beforeNode: "郭帅",
          intoTime: "2021-09-08 12:00:00"
        },
        {
          id: 4,
          type: "张小刚0",
          project: "销售部",
          status: 0,
          beforeNode: "郭帅",
          intoTime: "2021-09-08 12:00:00"
        }
      ],
      headerList: [
        {
          num: 300,
          value: "增减员工"
        },
        {
          num: 300,
          value: "雇员入离职"
        },
        {
          num: 300,
          value: "社保公积金请款"
        },
        {
          num: 300,
          value: "薪资请款"
        },
        {
          num: 300,
          value: "催款"
        },
        {
          num: 300,
          value: "雇员申诉"
        },
      ],
      projects: [],
      loading: true,
      activities: [],
      teams: [],
      welcome: {
        timeFix: '',
        message: ''
      }
    }
  },
  computed: {
    ...mapState('account', { currUser: 'user' }),
    ...mapState('setting', ['lang'])
  },
  created () {
    request('/user/welcome', METHOD.GET).then(res => this.welcome = res.data)
    request('/work/activity', METHOD.GET).then(res => this.activities = res.data)
    request('/work/team', METHOD.GET).then(res => this.teams = res.data)
    request('/project', METHOD.GET).then(res => {
      this.projects = res.data
      this.loading = false
    })
  },
  mounted () {
    console.log('aa', this.$router,)
    // this.$router.options.routes[3].children[4].children
  },
  methods: {
    goPage (fullPath) {
      this.$router.push(fullPath)
    },
    onDeal () { },
    onViewAll () {
      this.$router.push("todoOrder/orderList")
    },
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChange (page, pageSize) {
      console.log(page, pageSize)
      this.page = page
      this.pageSize = pageSize
    },
    onSizeChange (current, size) {
      console.log(current, size)
      this.page = 1
      this.pageSize = size
    },
  },
}
</script>

<style lang="less" scoped>
@import "index";
/deep/ .extra {
  width: 100%;
}
.workPlace {
  width: 100%;
  /deep/ &.between .ant-list-items {
    justify-content: space-between;
  }
  /deep/ &.around .ant-list-items {
    justify-content: space-around;
  }
  .ant-list-item {
    // .ant-list-item {
    border: none;
    // }
    // .ant-list-item-meta-title a {
    //   color: @aa;
    // }
  }
  /deep/ .ant-list-items {
    display: flex;
    .ant-list-item();
  }
}
</style>
